<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>methods</title>
</head>

<body>
    <div id="app">
        <div id="app">
            千米:<input type="text" v-model="kilometers">
            米:<input type="text" v-model="meters">
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    kilometers: 0,
                    meters: 0
                }
            },
            // 监听属性
            watch: {
                kilometers(val) {
                    this.meters = val * 1000;
                },
                meters(val, oldVal) {
                    this.kilometers = val / 1000;
                }
            }
        }).mount(' #app');
    </script>
</body>

</html>